<template>
  <div class="metadata">
    <div class="left">
      <TableConfigList @search-metadata-table="handleSearchMetadata"></TableConfigList>
    </div>
    <div class="right">
      <FieldConfig :key="keyData" :table-config-id="tableConfigId" :table-name="tableName"></FieldConfig>
    </div>
  </div>
</template>

<script setup lang="ts">
import TableConfigList from './components/TableConfigList.vue';
import FieldConfig from './components/FieldConfig.vue';
const tableConfigId = ref()
const tableName = ref('')
const keyData = ref(1)
const handleSearchMetadata = (id,name) => {
  keyData.value++
  tableConfigId.value = id
  tableName.value = name
}
</script>

<style lang="scss" scoped>
.metadata{
  display: flex;
  padding: 10px 0;
  height: 100%;
  overflow: hidden;
  .left{
    width: 25%;
    margin-right: 20px;
  }
  .right{
    width: calc(75% - 20px);
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .right::-webkit-scrollbar{
    display: none; /* Chrome Safari */
  }
}
</style>